<template>
  <view class="property-work-page">
    <!-- 物业工作功能网格 -->
    <view class="work-grid">
      <view
        v-for="work in workList"
        :key="work.id"
        class="work-item"
        @click="handleWork(work)"
      >
        <view class="work-icon" :style="{ background: work.color }">
          <u-icon :name="work.icon" color="#fff" size="20"></u-icon>
        </view>
        <text class="work-text">{{ work.text }}</text>
      </view>
    </view>

    <!-- 物业工作公告 -->
    <view class="announcement-section">
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">物业工作公告</text>
          <u-button
            type="info"
            size="small"
            text="更多"
            plain
            @click="viewMoreAnnouncements"
          ></u-button>
        </view>
        <view class="announcement-list">
          <view
            v-for="announcement in announcements"
            :key="announcement.id"
            class="announcement-item"
            @click="viewAnnouncement(announcement)"
          >
            <view class="announcement-icon">
              <u-icon name="file-text" color="#1890ff" size="16"></u-icon>
            </view>
            <view class="announcement-content">
              <text class="announcement-title">{{ announcement.title }}</text>
              <text class="announcement-time">{{ announcement.time }}</text>
            </view>
            <view class="announcement-badge" v-if="announcement.isTop">
              <u-tag text="置顶" type="warning" size="mini"></u-tag>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 物业工作任务 -->
    <view class="task-section">
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">物业工作任务</text>
          <u-button
            type="info"
            size="small"
            text="更多"
            plain
            @click="viewMoreTasks"
          ></u-button>
        </view>
        <view class="task-list">
          <view
            v-for="task in workTasks"
            :key="task.id"
            class="task-item"
            @click="viewTask(task)"
          >
            <view class="task-image">
              <view class="task-image-placeholder">
                <u-icon name="calendar" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view class="task-info">
              <text class="task-title">{{ task.title }}</text>
              <text class="task-time">{{ task.time }}</text>
              <view class="task-status">
                <u-tag :text="task.statusText" :type="task.statusType" size="mini"></u-tag>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'PropertyWork',
  setup() {
    // 物业工作功能列表数据
    const workList = ref([
      {
        id: 1,
        text: '人员管理',
        icon: 'account-multiple',
        color: '#3742fa',
        action: 'staff-management'
      },
      {
        id: 2,
        text: '排班管理',
        icon: 'calendar-clock',
        color: '#ff6b35',
        action: 'schedule-management'
      },
      {
        id: 3,
        text: '考勤管理',
        icon: 'clock',
        color: '#2ed573',
        action: 'attendance-management'
      },
      {
        id: 4,
        text: '请假管理',
        icon: 'calendar',
        color: '#ff9500',
        action: 'leave-management'
      },
      {
        id: 5,
        text: '维修管理',
        icon: 'tools',
        color: '#ff4757',
        action: 'repair-management'
      },
      {
        id: 6,
        text: '消息通知',
        icon: 'bell',
        color: '#a55eea',
        action: 'notification'
      },
      {
        id: 7,
        text: '工作统计',
        icon: 'chart',
        color: '#26de81',
        action: 'statistics'
      },
      {
        id: 8,
        text: '安保管理',
        icon: 'shield',
        color: '#fd79a8',
        action: 'security-management'
      },
      {
        id: 9,
        text: '保洁管理',
        icon: 'broom',
        color: '#00b894',
        action: 'cleaning-management'
      },
      {
        id: 10,
        text: '更多功能',
        icon: 'more-dot-fill',
        color: '#636e72',
        action: 'more'
      }
    ])

    // 物业工作公告数据
    const announcements = ref([
      {
        id: 1,
        title: '物业工作月度总结报告',
        time: '2025-01-21 10:00',
        isTop: true
      },
      {
        id: 2,
        title: '业主满意度调查结果',
        time: '2025-01-20 14:30',
        isTop: false
      },
      {
        id: 3,
        title: '设备维护计划安排',
        time: '2025-01-19 09:15',
        isTop: false
      }
    ])

    // 物业工作任务数据
    const workTasks = ref([
      {
        id: 1,
        title: '业主大会筹备工作',
        time: '2025-02-10 19:00',
        statusText: '进行中',
        statusType: 'success'
      },
      {
        id: 2,
        title: '设备检修维护',
        time: '2025-01-25 09:00',
        statusText: '即将开始',
        statusType: 'warning'
      },
      {
        id: 3,
        title: '业主满意度调查',
        time: '2025-01-28 15:00',
        statusText: '进行中',
        statusType: 'success'
      }
    ])

    // 处理物业工作功能点击
    const handleWork = (work) => {
      switch (work.action) {
        case 'staff-management':
          uni.navigateTo({ url: '/pages/property-work/staff-management' })
          break
        case 'schedule-management':
          uni.navigateTo({ url: '/pages/property-work/schedule-management' })
          break
        case 'attendance-management':
          uni.navigateTo({ url: '/pages/property-work/attendance-record' })
          break
        case 'leave-management':
          uni.navigateTo({ url: '/pages/property-work/leave-record' })
          break
        case 'repair-management':
          uni.navigateTo({ url: '/pages/property-work/repair-management' })
          break
        case 'notification':
          uni.navigateTo({ url: '/pages/property-work/notification' })
          break
        case 'statistics':
          uni.showToast({ title: '工作统计功能开发中', icon: 'none' })
          break
        case 'security-management':
          uni.navigateTo({ url: '/pages/property-work/security-management/index' })
          break
        case 'cleaning-management':
          uni.navigateTo({ url: '/pages/property-work/cleaning-management/index' })
          break
        case 'more':
          uni.showToast({ title: '更多物业功能开发中', icon: 'none' })
          break
      }
    }

    // 查看公告详情
    const viewAnnouncement = (announcement) => {
      uni.showToast({
        title: '公告详情功能开发中',
        icon: 'none'
      })
    }

    // 查看任务详情
    const viewTask = (task) => {
      uni.showToast({
        title: '任务详情功能开发中',
        icon: 'none'
      })
    }

    // 查看更多公告
    const viewMoreAnnouncements = () => {
      uni.showToast({
        title: '更多公告功能开发中',
        icon: 'none'
      })
    }

    // 查看更多任务
    const viewMoreTasks = () => {
      uni.showToast({
        title: '更多任务功能开发中',
        icon: 'none'
      })
    }

    // 页面加载时初始化数据
    onMounted(() => {
      // 生产环境不需要console.log
    })

    return {
      workList,
      announcements,
      workTasks,
      handleWork,
      viewAnnouncement,
      viewTask,
      viewMoreAnnouncements,
      viewMoreTasks
    }
  }
}
</script>

<style lang="scss" scoped>
.property-work-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .work-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .work-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15rpx;
    }
    
    .work-text {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.announcement-section,
.task-section {
  margin-bottom: 30rpx;
  
  .section-card {
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .section-header {
      padding: 30rpx 30rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #eee;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
}

.announcement-list {
  padding: 20rpx 30rpx 30rpx;
  
  .announcement-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .announcement-icon {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #f0f8ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    
    .announcement-content {
      flex: 1;
      
      .announcement-title {
        display: block;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 8rpx;
        line-height: 1.4;
      }
      
      .announcement-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .announcement-badge {
      margin-left: 20rpx;
    }
  }
}

.task-list {
  padding: 20rpx 30rpx 30rpx;
  
  .task-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .task-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
      
      .task-image-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .task-info {
      flex: 1;
      
      .task-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
        line-height: 1.4;
      }
      
      .task-time {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
      }
      
      .task-status {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
